/*
 * @Author: Lin Hongwei
 * @Date: 2022-09-20 21:56:31
 * @LastEditTime: 2022-10-06 16:18:20
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 项目气泡卡片
 */
import styled from "@emotion/styled";
import { Divider, List, Popover, Typography } from "antd";
import { useQueryProject } from "../api/project";

export const ProjectPopover = (props: { projectButton: JSX.Element }) => {
  const { data } = useQueryProject();
  const list = data?.filter((item) => item.pin);
  const popoverContent = (
    <ContentContainer>
      <Typography.Text type="secondary">收藏项目</Typography.Text>
      <List
        split={true}
        dataSource={list}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta title={item.name} />
          </List.Item>
        )}
      />
      <Divider />
      {props.projectButton}
    </ContentContainer>
  );
  return (
    <Popover content={popoverContent}>
      <span>项目 </span>
    </Popover>
  );
};

const ContentContainer = styled.div`
  min-width: 30rem;
`;
